<template>
  <div class="app-container">
    <el-card class="tableset" shadow="never" :body-style="{ padding: '0px' }">
      <!-- 小标题 -->
      <div>
        <span class="title">区域列表</span>
        <el-button
          type="success"
          class="title-button-right"
          icon="el-icon-setting"
          plain
          @click="areaGroupDialog = true"
        >管理区域分组</el-button>
        <el-button
          type="primary"
          class="title-button-right"
          icon="el-icon-plus"
          plain
          @click="openAddChangeAreaInfoDialog"
        >新 增</el-button>
      </div>
      <!-- 小标题 -->

      <!-- 搜索关键词 -->
      <div class="funtion">
        <el-input
          v-model="get_area_info_list.keyword"
          placeholder="请输入关键词"
          class="input-with-select"
          clearable
          @keyup.enter.native="getAreaInfoList"
        >
          <el-select
            slot="prepend"
            v-model="get_area_info_list.keywordType"
            placeholder="请选择"
            class="option"
          >
            <el-option label="区域编号" value="0" />
            <el-option label="区域名称" value="1" />
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="getAreaInfoList" />
        </el-input>
      </div>
      <!-- 搜索关键词 -->

      <!-- 数据表 -->
      <el-table
        v-loading="dataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        :data="data_area_info_list.data"
        class="table"
        :height="tableHeight"
        :max-height="tableHeight"
        highlight-current-row
        @selection-change="getSelection"
        @sort-change="changeSort"
        @filter-change="changefilter"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="area_group_name"
          label="所属区域组"
          :filters="data_area_info_list.filterAreaGroupId"
          :filter-multiple="false"
          column-key="filterAreaGroup"
        />
        <el-table-column
          prop="area_number"
          label="区域编号"
        />
        <el-table-column
          prop="name"
          label="区域名称"
        />
        <el-table-column
          prop="longitude_and_latitude"
          label="区域经纬度"
        />
        <el-table-column
          prop="address"
          label="区域地址"
        />
        <el-table-column
          prop="cloud_printer_total"
          label="投入使用打印机数量"
          sortable="custom"
          column-key="cloud_printer_total"
        />
        <el-table-column
          prop="create_time"
          label="进驻日期"
          sortable="custom"
          column-key="create_time"
        />
        <el-table-column
          prop="status"
          label="状态"
          :filters="[{ text: '已启动', value: 1 }, { text: '已停用', value: 0 }]"
          :filter-multiple="false"
          column-key="filterStatus"
        >
          <template slot-scope="{ row }">
            <el-tag
              :type="row.status ? 'success': 'danger'"
              effect="dark"
            >
              {{ row.status ? '已启动': '已停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="path"
          width="200"
          label="区域封面图"
        >
          <template slot-scope="{ row }">
            <el-image
              style="width: 96px; height: 54px"
              fit="cover"
              :src="url + row.path"
              :preview-src-list="[url + row.path]"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="165px">
          <template slot-scope="{ row }">
            <el-button type="success" @click="openChangeAreaInfoDialog(row)">编辑</el-button>
            <el-dropdown @command="(command) => handleCommand(command, row)">
              <el-button type="primary">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-permission="['charge-standard']" command="chargesEvent">收费标准</el-dropdown-item>
                <el-dropdown-item v-permission="['leader-manage']" command="headManageEvent">负责人管理</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- 数据表 -->

      <!-- 修改区域信息Dialog -->
      <el-dialog
        :title="change_area_info_title"
        :visible.sync="changeAreaInfoDialog"
        width="600px"
        :close-on-click-modal="false"
        append-to-body
      >
        <el-form ref="changeAreaInfoForm" :model="change_area_info" status-icon size="mini" label-width="92px">
          <el-form-item prop="path" :rules="rules.image" size="mini" label="上传区域封面图 支持 （ jpg/png/gif ）">
            <el-upload
              class="avatar-uploader"
              action
              :show-file-list="false"
              :auto-upload="false"
              :on-change="changeUploadImage"
            >
              <img v-if="change_area_info.path" :src="showAvatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item prop="area_group_id" :rules="rules.select" label="所属区域组">
            <el-select v-model="change_area_info.area_group_id" placeholder="请选择所属区域组">
              <el-option
                v-for="item in data_area_info_list.filterAreaGroupId"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="area_number" :rules="rules.input" label="区域编号">
            <el-input v-model="change_area_info.area_number" placeholder="请输入区域编号" clearable />
          </el-form-item>
          <el-form-item prop="name" :rules="rules.input" label="区域名称">
            <el-input v-model="change_area_info.name" placeholder="请输入区域名称" clearable />
          </el-form-item>
          <el-form-item prop="longitude_and_latitude" :rules="rules.input" label="区域经纬度">
            <el-input v-model="change_area_info.longitude_and_latitude" placeholder="请输入区域经纬度" clearable />
          </el-form-item>
          <el-form-item prop="address" :rules="rules.input" label="区域地址">
            <el-input v-model="change_area_info.address" placeholder="请输入区域地址" clearable />
          </el-form-item>
          <el-form-item prop="status" :rules="rules.select" size="mini" label="账号状态">
            <el-radio-group v-model="change_area_info.status" size="mini">
              <el-radio-button label="1">启用</el-radio-button>
              <el-radio-button label="0">停用中</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="changeAreaInfoDialog=false">取 消</el-button>
          <el-button size="mini" type="primary" @click="changeAreaInfo">保 存</el-button>
        </span>
      </el-dialog>
      <!-- 修改区域信息Dialog -->

      <!-- 数据表左下方功能区 -->
      <div>
        <el-button
          type="danger"
          class="card-bottom-button-left"
          icon="el-icon-delete"
          plain
          :disabled="deleteDisabled"
          @click="deleteArea"
        >删除</el-button>
        <el-button
          v-permission="['area-switch']"
          type="success"
          class="card-bottom-button-left"
          icon="el-icon-check"
          plain
          :disabled="startDisabled"
          @click="changeAreaStatus(1)"
        >启用</el-button>
        <el-button
          v-permission="['area-switch']"
          type="warning"
          class="card-bottom-button-left"
          icon="el-icon-minus"
          plain
          :disabled="stopDisabled"
          @click="changeAreaStatus(0)"
        >停用</el-button>
      </div>
      <!-- 数据表左下方功能区 -->

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="total, sizes,prev, pager, next, jumper"
        :total="data_area_info_list.total"
        :page-size="get_area_info_list.pageSize"
        :page-sizes="[20, 50, 100]"
        :current-page="get_area_info_list.currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
      <!-- 分页 -->
    </el-card>

    <!-- 管理区域分组dialog -->
    <el-dialog
      title="管理区域分组"
      :visible.sync="areaGroupDialog"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-button type="primary" @click="addAreaGroupInfo">新增区域分组</el-button>
      <el-table
        v-loading="dialogDataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        :data="data_area_group_info_list.data"
        class="table"
        :highlight-current-row="select_row"
        :height="tableHeight"
        :max-height="tableHeight"
        @row-click="rowClick"
        @current-change="rowEdit"
      >
        <el-table-column prop="name" label="区域组名称">
          <template slot-scope="{ row }">
            <el-input v-if="row.edit" v-model="row.name" size="small" placeholder="请输入区域分组名称" @click.stop.native="" />
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
        />
        <el-table-column fixed="right" label="操作" width="160px">
          <template slot-scope="{ row }">
            <el-button v-if="row.edit" type="success" icon="el-icon-check" @click.stop="closeClick(row)" />
            <el-button type="danger" icon="el-icon-close" @click.stop="deleteAreaGroupInfo(row.area_group_id)" />
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="areaGroupDialog=false">取 消</el-button>
        <el-button size="mini" type="primary" @click="changeAreaGroupInfo">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 管理区域分组dialog -->

    <!-- 剪切图片dialog -->
    <el-dialog title="图片剪裁" :visible.sync="UploadAvatarPathDialog" :close-on-click-modal="false">
      <div class="cropper-content">
        <div class="cropper" style="text-align:center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :info="option.info"
            :output-size="option.size"
            :output-type="option.outputType"
            :can-scale="option.canScale"
            :auto-crop="option.autoCrop"
            :auto-crop-width="option.autoCropWidth"
            :auto-crop-height="option.autoCropHeight"
            :fixed-box="option.fixedBox"
            :fixed="option.fixed"
            :fixed-number="option.fixedNumber"
            :full="option.full"
            :can-move-box="option.canMoveBox"
            :original="option.original"
            :center-box="option.centerBox"
            :info-true="option.infoTrue"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="UploadAvatarPathDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" :loading="uploadImageLoading" @click="upLoadImage">确认</el-button>
      </div>
    </el-dialog>
    <!-- 剪切图片dialog -->

    <!--负责人管理弹窗-->
    <HeadManage
      v-model="headManageVisible"
      width="1200px"
      title="负责人管理"
      :data-area-principal-info-list="data_area_principal_info_list.data"
      :area-id="area_id"
      @getAreaPrincipalInfoList="headManageEvent(area_id)"
    />
    <!--负责人管理弹窗-->

    <!--收费标准弹窗-->
    <ChargesManage
      v-model="chargesVisible"
      width="1200px"
      :data-area-rates="data_area_rates.data"
      :area-id="area_id"
      @getAreaRates="chargesEvent(area_id)"
    />
    <!--收费标准弹窗-->
  </div>
</template>

<script>
import { getAreaInfoList, changeAreaInfo, deleteArea, changeAreaStatus, getAreaPrincipalInfoList, getAreaRates, getAreaGroupInfoList, addAreaGroupInfo, changeAreaGroupInfo, deleteAreaGroupInfo } from '@/api/region'
import HeadManage from './components/HeadManage'
import ChargesManage from './components/ChargesManage'
import { getFormData } from '@/common/js/until'
import { uploadImage } from '@/api/upload'

export default {
  name: 'Region',
  components: {
    HeadManage,
    ChargesManage
  },
  data() {
    return {
      // table高度自适应
      tableHeight: window.innerHeight - 265,

      // loading开关
      dataRequestLoading: false,
      dialogDataRequestLoading: false,

      // 行内编辑绑定值
      select_row: '',
      // 按钮开关
      startDisabled: true,
      stopDisabled: true,
      deleteDisabled: true,
      url: process.env.VUE_APP_BASE_API,
      // loading开关
      uploadImageLoading: false,
      areaGroupDialog: false,
      // 展示头像
      showAvatar: '',
      // 图片裁剪框
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 700, // 默认生成截图框宽度
        autoCropHeight: 700, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      // 账号状态栏显示
      status: {
        0: { color: 'danger', label: '停用中' },
        1: { color: 'success', label: '启用' }
      },
      // 编辑增加账号信息
      changeAreaInfoDialog: false,
      // 图片剪辑dialog
      UploadAvatarPathDialog: false,
      // 负责人管理弹窗
      headManageVisible: false,
      // 收费标准弹窗
      chargesVisible: false,

      // 请求区域信息参数
      get_area_info_list: {
        pageSize: 20,
        currentPage: 1,
        keyword: '',
        keywordType: '0',
        sort_name: '',
        sort: 'desc',
        filterStatus: '',
        filterAreaGroup: ''
      },

      // 返回区域信息参数
      data_area_info_list: {
        data: [],
        filterAreaGroupId: [],
        total: 0
      },

      // 请求区域组信息参数
      get_area_group_info_list: {
        pageSize: 20,
        currentPage: 1,
        keywordName: '',
        sort_name: '',
        sort: 'desc'
      },

      // 返回区域组信息参数
      data_area_group_info_list: {
        data: [],
        total: 0
      },

      // 新增/修改区域信息参数dialog标题
      change_area_info_title: '',

      // 新增/修改区域信息参数
      change_area_info: {
        area_group_id: '',
        area_id: '',
        name: '',
        longitude_and_latitude: '',
        address: '',
        path: '',
        status: ''
      },

      // 区域id
      area_id: 0,

      // 返回区域负责人信息列表
      data_area_principal_info_list: {
        data: []
      },
      // 返回区域收费标准列表
      data_area_rates: {
        data: {}
      },

      // 表单校验规则
      rules: {
        input: { required: true, message: '请完成输入！', trigger: 'blur' },
        select: { required: true, message: '请完成选择！', trigger: 'blur' },
        image: { required: true, message: '请完成输入！', trigger: 'blur' }
      }
    }
  },
  mounted() {
    this.getAreaInfoList() // 查询区域信息列表
    this.getAreaGroupInfoList() // 查询区域组信息列表
  },
  methods: {
    // 查询区域信息列表
    getAreaInfoList() {
      this.dataRequestLoading = true
      getAreaInfoList(this.get_area_info_list).then(res => {
        this.data_area_info_list = {
          data: res.result.showing,
          filterAreaGroupId: res.result.filterAreaGroupId,
          total: res.result.total
        }
        this.dataRequestLoading = false
      })
    },

    // 查询区域组信息列表
    getAreaGroupInfoList() {
      this.dialogDataRequestLoading = true
      getAreaGroupInfoList(this.get_area_group_info_list).then(res => {
        this.data_area_group_info_list = {
          data: res.result.showing,
          total: res.result.total
        }
        this.dialogDataRequestLoading = false
      })
    },

    // 新增区域组信息
    addAreaGroupInfo() {
      this.$prompt('请输入区域组名称', '新增区域组', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        addAreaGroupInfo({ name: value }).then(res => {
          this.getAreaInfoList()
          this.getAreaGroupInfoList()
          this.$notify({
            title: '成功',
            message: '新增区域组信息成功！',
            type: 'success'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },

    // 修改区域组信息
    changeAreaGroupInfo() {
      changeAreaGroupInfo({ areaGroupJson: this.data_area_group_info_list.data }).then(res => {
        this.getAreaInfoList()
        this.getAreaGroupInfoList()
        this.areaGroupDialog = false
        this.$notify({
          title: '成功',
          message: '修改区域组信息成功！',
          type: 'success'
        })
      })
    },

    // 删除区域组信息
    deleteAreaGroupInfo(data) {
      this.$confirm('此操作将删除该区域组信息，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteAreaGroupInfo({ area_group_id: data }).then(res => {
          this.getAreaInfoList()
          this.getAreaGroupInfoList()
          this.$notify({
            title: '成功',
            message: '删除区域组信息成功！',
            type: 'success'
          })
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },

    // 打开新增dialog
    openAddChangeAreaInfoDialog() {
      this.change_area_info_title = '新增区域'
      this.change_area_info = {
        area_group_id: '',
        area_id: '',
        area_number: '',
        name: '',
        longitude_and_latitude: '',
        address: '',
        path: '',
        status: 1
      }
      this.changeAreaInfoDialog = true
    },

    // 打开修改Dialog
    openChangeAreaInfoDialog(row) {
      this.change_area_info_title = '编辑区域'
      this.changeAreaInfoDialog = true
      this.showAvatar = process.env.VUE_APP_BASE_API + row.path
      this.change_area_info = {
        area_group_id: row.area_group_id,
        area_id: row.area_id,
        area_number: row.area_number,
        name: row.name,
        longitude_and_latitude: row.longitude_and_latitude,
        address: row.address,
        path: row.path,
        status: row.status
      }
    },

    // 新增/修改区域信息
    changeAreaInfo() {
      this.$refs.changeAreaInfoForm.validate(valid => {
        if (valid) {
          changeAreaInfo(this.change_area_info).then(res => {
            this.getAreaInfoList()
            this.changeAreaInfoDialog = false
            this.$notify({
              title: '成功',
              message: '保存区域信息成功！',
              type: 'success'
            })
          })
        } else {
          return false
        }
      })
    },

    // 获取选择项
    getSelection(selection) {
      if (selection.length === 0) {
        this.startDisabled = true
        this.stopDisabled = true
        this.deleteDisabled = true
      } else {
        this.startDisabled = false
        this.stopDisabled = false
        this.deleteDisabled = false
      }
      this.selection = selection
    },

    // 批量启动/停用区域
    changeAreaStatus(status) {
      this.$confirm('此操作将改变所选中的区域的状态,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const area_id = []
        this.selection.forEach(val => {
          area_id.push(val.area_id)
        })
        changeAreaStatus({ status: status, area_id: area_id }).then(res => {
          this.getAreaInfoList()
          this.$notify({
            title: '成功',
            message: '修改区域状态成功！',
            type: 'success'
          })
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消操作' })
      })
    },

    // 批量删除区域（逻辑删除）
    deleteArea() {
      this.$confirm('此操作将永久删除该区域，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const area_id = []
        this.selection.forEach(val => {
          area_id.push(val.area_id)
        })
        deleteArea({ area_id: area_id }).then(res => {
          this.getAreaInfoList()
          this.$notify({
            title: '成功',
            message: '删除该区域成功！',
            type: 'success'
          })
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消操作' })
      })
    },

    // 切换每页条数方法
    changePageSize(data) {
      this.get_area_info_list.pageSize = data
      this.getAreaInfoList()
    },

    // 切换页码方法
    changeCurrentPage(data) {
      this.get_area_info_list.currentPage = data
      this.getAreaInfoList()
    },

    /**
       * @param command 方法名
       * @param row 行数据
       */
    handleCommand(command, row) {
      this[command](row.area_id)
    },

    /**
       * 打开负责人管理弹窗
       */
    headManageEvent(area_id) {
      this.headManageVisible = true
      const params = {
        sort_name: '',
        sort: 'desc',
        area_id: area_id
      }
      this.area_id = area_id
      getAreaPrincipalInfoList(params).then(res => {
        this.data_area_principal_info_list.data = res.result.showing
      })
    },

    /**
       * 打开收费标准弹窗
       */
    chargesEvent(area_id) {
      this.chargesVisible = true
      const params = {
        area_id: area_id
      }
      this.area_id = area_id
      getAreaRates(params).then(res => {
        this.data_area_rates.data = res.result
      })
    },

    // 打开剪切界面或直接上传gif
    changeUploadImage(file, fileList) {
      const isLt5M = file.size / 1024 / 1024 < 2
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        fileList.pop()
        return false
      }
      if (file.raw.type === 'image/gif') {
        const formData = getFormData(file.raw, 'avatarGif')
        uploadImage(formData).then(res => {
          this.change_area_info.path = res.result
          this.showAvatar = process.env.VUE_APP_BASE_API + res.result
        })
      } else {
        if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
          this.$message.error('上传图片只支持jpeg和png!')
          fileList.pop()
          return false
        }
        // 将图片地址赋值给裁剪框显示图片
        this.$nextTick(() => {
          fileList.pop()
          this.option.img = URL.createObjectURL(file.raw)
          this.UploadAvatarPathDialog = true
        })
      }
    },
    // 上传剪切后的图片
    upLoadImage() {
      this.$refs.cropper.getCropBlob(data => {
        const formData = getFormData(data, 'avatar')
        uploadImage(formData).then(res => {
          this.change_area_info.path = res.result
          this.showAvatar = process.env.VUE_APP_BASE_API + res.result
          this.UploadAvatarPathDialog = false
        })
      })
    },

    // 更换排序
    changeSort({ column, order }) {
      if (column.columnKey === 'cloud_printer_total') {
        switch (order) {
          case 'descending':
            this.get_area_info_list.sort_name = 'cloud_printer_total'
            this.get_area_info_list.sort = 'desc'
            this.getAreaInfoList()
            break
          case 'ascending':
            this.get_area_info_list.sort_name = 'cloud_printer_total'
            this.get_area_info_list.sort = 'asc'
            this.getAreaInfoList()
            break
          default:
            this.get_area_info_list.sort_name = ''
            this.get_area_info_list.sort = 'desc'
            this.getAreaInfoList()
        }
      } else if (column.columnKey === 'create_time') {
        switch (order) {
          case 'descending':
            this.get_area_info_list.sort_name = 'create_time'
            this.get_area_info_list.sort = 'desc'
            this.getAreaInfoList()
            break
          case 'ascending':
            this.get_area_info_list.sort_name = 'create_time'
            this.get_area_info_list.sort = 'asc'
            this.getAreaInfoList()
            break
          default:
            this.get_area_info_list.sort_name = ''
            this.get_area_info_list.sort = 'desc'
            this.getAreaInfoList()
        }
      }
    },

    // 筛选记录者
    changefilter(filters) {
      if (filters.filterStatus) {
        if (filters.filterStatus.length === 0) {
          this.get_area_info_list.filterStatus = ''
        } else {
          this.get_area_info_list.filterStatus = filters.filterStatus[0]
        }
      } else if (filters.filterAreaGroup) {
        if (filters.filterAreaGroup.length === 0) {
          this.get_area_info_list.filterAreaGroup = ''
        } else {
          this.get_area_info_list.filterAreaGroup = filters.filterAreaGroup[0]
        }
      }
      this.getAreaInfoList()
    },

    // 行内编辑
    rowClick(row) {
      row.edit = !row.edit
      if (this.select_row === false) {
        this.select_row = row.edit
      }
    },
    closeClick(row) {
      row.edit = false
      this.select_row = false
    },
    rowEdit(currentRow, oldCurrentRow) {
      if (oldCurrentRow !== null) {
        oldCurrentRow.edit = false
      }
    }
  }
}

</script>

<style scoped>
  .search-wrap {
    width: 100%;
  }
  .avatar-uploader-user {
  padding-bottom: 1rem;
  position: relative;
  text-align: center;
}
</style>
